﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="div生成图片.aspx.cs" Inherits="ProjectStudy.div生成图片" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/html2canvas2/html2canvas.min.js" type="text/javascript"></script>

        <script src="Scripts/jquery-3.1.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#div1").click(function () {
                
                $("#div1").append("<a id='a1'>下载</a>");
                GenerateImg($("#div1"), $("#a1"));
            });

        });

        function GenerateImg(div1,a1) {
            html2canvas($(div1), {
                onrendered: function (canvas) {
                    $(a1).attr('href', canvas.toDataURL());
                    $(a1).attr('download', 'myjobdeer.png');
                    //$('#down_button').css('display','inline-block');  
                    var html_canvas = canvas.toDataURL();
                    $.post('', {
                        order_id: 1,
                        type_id: 2,
                        html_canvas: html_canvas
                    }, function (json) { }, 'json');
                }
            });
        }         
    </script>
 <style type="text/css">

 </style>
</head>
<body>
    <form id="form1" runat="server">
    
      <div style=" text-align:center; vertical-align:middle; ">
          <div id="div1"  style="width: 100px; height: 100px; background-color: cornflowerblue;margin:0 auto; text-align:center; vertical-align:middle;">
              <div style=" width:50px; height:50px; background-color:Red;margin:0 auto; margin-top:25px; margin-bottom:25px;"></div>

         </div>
       </div>
       
       <br />
       <br />
       <a id="a1" >下载</a>   
    </form>
</body>
</html>
